<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/animate.css">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>{{title}} </h2>
        <odiv></odiv>
        <myhead></myhead>
        <my-swipe></my-swipe>
        <vm1></vm1>
        <div id="once"></div>
        <my-btn></my-btn>
        <frist></frist>
        <my-btn></my-btn>
        <my-btn></my-btn>

    </div>


    <script>
        Vue.component("",{ //全局变量
            template:"<h3> Demo - Demo - Demo </h3>",
            data(){
                return{}
            },
            computed:{},
            methods:{},
            mounted(){},
            created(){},
            directives:{},
            filters:{},
            watch:{},
            components:{},
        })

        Vue.component('odiv',{
            template:"<h3> Good Good Study </h3>"
        })
        Vue.component('myhead',{
            template:"<header>越努力越幸运</header>"
        })

        const qwe = {
            template:"<h3> swiper - 手动封装的轮播组件 <h3>"
        }
        Vue.component('my-swipe',qwe)

        const qwe2 = {
            template:"<h2>Vue.extend 可以创建一个“子类” 子组件</h2>"
        }
        const vm1 = Vue.extend(qwe2)
        Vue.component('vm1',vm1)

        new vm1().$mount('#once')

        Vue.component('my-btn',{
            template:"<button @click='countAdd'>{{count}}</button>",
            data(){
                return{
                    count:1
                }
            },
            methods:{
                countAdd(){
                    this.count += 1
                }
            }
        })

        const vm = new Vue({

            data:{
                title:"Vue component 自定义组件"
            },
            components:{ //局部变量
                frist:{
                    template:"<h3>frist - Vue 组件初始化</h3>"
                }
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title
            },

        }).$mount('#app')
    </script>
</body>
</html>